<template>
	<view class="box">
		<view class="header">
			<image src="../../static/img/tubiao8-.png" mode=""></image>
			<view class="m">
				<text :class="[now===0 ?'active' :'']" @click="now=0">公益活动</text>
				<text :class="[now===1 ?'active' :'']" @click="now=1">社团</text>
				<text @click="toArticle">公益文章</text>
			</view>
			<image src="../../static/img/00b0ff.png" mode="" @click="toSearch"></image>
		</view>

		<view class="first" v-if="now===0">
			<view class="uni-padding-wrap" style="margin-top: 30rpx;">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
							<swiper-item>
								<view class="swiper-item uni-bg-red">
									<image src="../../static/img/%5D%60HLX0HH@AQCAU1G)BXM%5DPA.png" mode="" style="width: 100%;"></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>

			<view class="tabar">
				<view class="item" @click="toSortp">
					<image src="../../static/img/R(LOXEGB~DU5K%5DY$3$SA450.png" mode=""></image>
					<text>排行榜</text>
				</view>
				<view class="item" @click="toShop">
					<image src="../../static/img/youhuiquan.png" mode=""></image>
					<text>积分商城</text>
				</view>
			</view>

			<view class="tips">
				<image src="../../static/img/laba2.png" mode=""></image>
				<text>公益是靠所有人推动的</text>
			</view>

			<view class="cut"></view>

			<view class="good">
				<view class="top">
					<view class="title">优质公益活动</view>
					<view class="more" @click="toEndMore">更多</view>
				</view>
				<view class="content">
					<view class="item" @click="toItemDetail">
						<image src="../../static/img/u=3705642768,1010445385&fm=26&gp=0.jpg" mode=""></image>
						<text>校园绿箭侠活动</text>
					</view>
					<view class="item">
						<image src="../../static/img/u=3705642768,1010445385&fm=26&gp=0.jpg" mode=""></image>
						<text>校园绿箭侠活动</text>
					</view>
					<view class="item">
						<image src="../../static/img/u=3705642768,1010445385&fm=26&gp=0.jpg" mode=""></image>
						<text>校园绿箭侠活动</text>
					</view>
					<view class="item">
						<image src="../../static/img/u=3705642768,1010445385&fm=26&gp=0.jpg" mode=""></image>
						<text>校园绿箭侠活动</text>
					</view>
				</view>
			</view>

			<view class="adver">
				<image src="../../static/img/O%7D1%60R4I%7D8KQCAC1A%5D6_$%25WO.png" mode=""></image>
			</view>

			<view class="ing">
				<view class="top">
					<view class="title">正在进行的活动</view>
					<view class="more" @click="toIngMore">更多</view>
				</view>
				<view class="content">
					<view class="item-list">
						<view class="item">
							<image src="../../static/img/aaa.jpg" mode=""></image>
							<p>养老院探望老人<p>
									<p class="t">以召集<text class="s">170</text>人</p>
						</view>
						<view class="item">
							<image src="../../static/img/aaa.jpg" mode=""></image>
							<p>养老院探望老人</p>
							<p class="t">以召集170人</p>
						</view>
						<view class="item">
							<image src="../../static/img/aaa.jpg" mode=""></image>
							<p>养老院探望老人</p>
							<p class="t">以召集170人</p>
						</view>
						<view class="item">
							<image src="../../static/img/aaa.jpg" mode=""></image>
							<p>养老院探望老人</p>
							<p class="t">以召集170人</p>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="second" v-if="now===1">
			<view class="headshow">
				<image src="../../static/img/v2_q3os0i.jpg" mode=""></image>
			</view>

			<view class="good">
				<view class="top">
					<view class="title">精选社团</view>
					<view class="more" @click="toMoreCom">更多</view>
				</view>
				<view class="content">
					<view class="item-list">
						<view class="item" v-for="item in commulists">
							<image :src="item.avatar" mode=""></image>
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="list">
				<view class="item" @click="toDetail">
					<view class="deline"></view>
					<view class="top">
						<view class="left">
							<image src="../../static/img/icon_mine.png" mode=""></image>
							<text>绿色校园社团</text>
						</view>
						<view class="right">
							<image src="../../static/img/jiahao.png" mode=""></image>
							<text>关注</text>
						</view>
					</view>
					<view class="content">
						<view class="top">
							让我们的校园多一点绿色，需要我们都加入进来。
						</view>
						<view class="tab">
							<image src="../../static/img/%5D%60HLX0HH@AQCAU1G)BXM%5DPA.png" mode=""></image>
							<image src="../../static/img/%5D%60HLX0HH@AQCAU1G)BXM%5DPA.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="deline"></view>
					<view class="top">
						<view class="left">
							<image src="../../static/img/icon_mine.png" mode=""></image>
							<text>绿色校园社团</text>
						</view>
						<view class="right">
							<image src="../../static/img/jiahao.png" mode=""></image>
							<text>关注</text>
						</view>
					</view>
					<view class="content">
						<view class="top">
							让我们的校园多一点绿色，需要我们都加入进来。
						</view>
						<view class="tab">
							<image src="../../static/img/%5D%60HLX0HH@AQCAU1G)BXM%5DPA.png" mode=""></image>
							<image src="../../static/img/%5D%60HLX0HH@AQCAU1G)BXM%5DPA.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="item">
					<view class="deline"></view>
					<view class="top">
						<view class="left">
							<image src="../../static/img/icon_mine.png" mode=""></image>
							<text>绿色校园社团</text>
						</view>
						<view class="right">
							<image src="../../static/img/jiahao.png" mode=""></image>
							<text>关注</text>
						</view>
					</view>
					<view class="content">
						<view class="top">
							让我们的校园多一点绿色，需要我们都加入进来。
						</view>
						<view class="tab">
							<image src="../../static/img/%5D%60HLX0HH@AQCAU1G)BXM%5DPA.png" mode=""></image>
							<image src="../../static/img/%5D%60HLX0HH@AQCAU1G)BXM%5DPA.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<Launch></Launch>
	</view>
</template>

<script>
	import Launch from "../launch/launch.vue"
	export default {
		components: {
			Launch
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				now: 0,
				commulists: []
			}
		},
		methods: {
			toDetail () {
				uni.navigateTo({
					url: "communityd"
				})
			},
			toShop () {
				uni.navigateTo({
					url: "shop"
				})
			},
			toArticle () {
				uni.navigateTo({
					url: "article"
				})
			},
			toEndMore() {
				uni.navigateTo({
					url: "communitye"
				})
			},
			toIngMore () {
				uni.navigateTo({
					url: "communitym"
				})
			},
			toMoreCom () {
				uni.navigateTo({
					url: "communitymm"
				})
			},
			toSortp () {
				uni.navigateTo({
					url: "sortp"
				})
			},
			toSearch () {
				uni.navigateTo({
					url: "search"
				})
			},
			toItemDetail () {
				uni.navigateTo({
					url: "itemi?id=1&name=uniapp",
				})
			}
		},
		async created() {
			let res = await uni.request({
				url: this.$config.basisIP,
				method: "POST",
				data: {
					fun: "good_project",
					
				},
				header: {
					"content-type": "application/x-www-form-urlencoded"
				}
			})
			
			// ...
			
			res = await uni.request({
				url: this.$config.basisIP,
				method: "POST",
				data: {
					fun: "	search_association",
					
				},
				header: {
					"content-type": "application/x-www-form-urlencoded"
				}
			})
			
			if (res[1].data.result && res[1].data.result[0]) {
				this.commulists = res[1].data.result
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		box-sizing: border-box;
		min-height: 100vh;
		padding: 40rpx 20rpx 0;
		background-color: #fff;

		.header {
			display: flex;
			font-size: $middleFont;
			color: $subColor;

			image {
				width: $middleIcon;
				height: $middleIcon;
			}

			.m {
				flex: 1;
				display: flex;

				text {
					margin-left: 30rpx;
				}

				.active {
					font-weight: bold;
					position: relative;

					&:after {
						content: "";
						display: block;
						width: 100%;
						height: 3px;
						background-color: $yellow;
						position: absolute;
						bottom: -5rpx;
					}
				}

			}
		}

		.first {


			.tabar {
				display: flex;
				margin-top: 20rpx;

				.item {
					text-align: center;
					flex: 1;

					image {
						width: 72rpx;
						height: 72rpx;
						margin: 0 auto;
						display: block;
					}

					text {
						font-size: $middleFont;
					}
				}
			}

			.tips {
				display: flex;
				align-items: center;
				margin-left: 90rpx;
				margin-top: 20rpx;

				image {
					width: $middleIcon;
					height: $middleIcon;
				}

				text {
					font-size: $middleFont;
					color: $subColor;
					margin-left: 50rpx;
				}
			}

			.cut {
				height: 10rpx;
				background: rgba(222, 222, 222, 1);
				position: absolute;
				left: 0;
				margin-top: 20rpx;
				width: 100%;
			}

			.good {
				margin-top: 50rpx;

				.top {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					margin-bottom: 20rpx;

					.title {
						font-size: $largeFont;
						font-weight: bold;
					}

					.more {
						font-size: $smallFont;
						color: $subColor;
					}
				}

				.content {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.item {
						image {
							width: 326rpx;
							height: 217rpx;
							display: block;
						}

						text {
							font-size: $middleFont;
						}
					}
				}
			}

			.adver {
				margin: 20rpx 0;

				image {
					border-radius: 10rpx;
					height: 207rpx;
					width: 100%;
				}
			}

			.ing {
				margin-bottom: 20rpx;

				.top {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					margin-bottom: 20rpx;

					.title {
						font-size: $largeFont;
						font-weight: bold;
					}

					.more {
						font-size: $smallFont;
						color: $subColor;
					}
				}

				.content {
					overflow: auto;

					.item-list {

						width: 200%;

						.item {
							margin-left: 20rpx;
							width: 217rpx;
							display: inline-block;
							background-color: #EDF1F2;
							font-size: $smallFont;

							image {
								width: 100%;
								height: 154rpx;
								display: block;
							}

							.t {
								color: $subColor;
							}

							.s {
								color: #FF9959;
							}

							&:first-child {
								margin-left: 0;
							}
						}
					}
				}
			}
		}

		.second {
			.headshow {
				margin-top: 30rpx;

				image {
					width: 100%;
					height: 245rpx;
				}
			}

			.good {
				margin-top: 10rpx;

				.top {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;

					.title {
						font-size: $largeFont;
						font-weight: bold;
					}

					.more {
						font-size: $smallFont;
						color: $subColor;
					}
				}

				.content {
					margin-top: 20rpx;
					overflow: auto;

					.item-list {
						width: 200%;

						.item {
							display: inline-block;
							margin-right: 20rpx;

							image {
								width: 181rpx;
								height: 181rpx;
								margin-bottom: 10rpx;
								display: block;
								box-shadow: $viewShadow;
							}

							font-size: 14px;
						}
					}
				}
			}

			.list {
				.item {
					.deline {
						height: 18rpx;
						background: #EAEAEA;
						width: 100%;
						position: absolute;
						left: 0;
					}

					.top {
						margin-top: 30rpx;
						display: flex;
						justify-content: space-between;

						.left {
							display: flex;
							align-items: center;

							image {
								width: 91rpx;
								height: 91rpx;
								border-radius: 50%;
							}

							text {
								font-size: 14px;
								margin-left: 10rpx;
							}
						}

						.right {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 127rpx;
							height: 54rpx;
							background-color: $yellow;
							border-radius: 91rpx;
							color: #fff;
							font-size: 25rpx;

							image {
								width: 30rpx;
								height: 30rpx;
							}
						}
					}

					.content {
						.top {
							font-size: 25rpx;
						}

						.tab {
							padding-top: 30rpx;

							image {
								margin-right: 30rpx;
								width: 181rpx;
								height: 150rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
